<!--
:mc-config="{'saveUrl':'提交表单','getUrl':''}"
提交前执行的方法：如果返回false 则不提交 可以做表单校验
:before-submit=function({param,form}){return true;}
查询表单前执行
:before-query-form=function({param,form}){return true;}
@on-success 当提交成功
@before-render-data 当渲染数据前执行
-->
<template>
  <el-row ref="mcQuesBody" class="mc-questionnaire mc-on-shade" v-bind="$attrs" v-on="$listeners">
      <!-- 帮助信息 -->
      <el-col v-if="assist.show"  class="mc-questionnaire-assist" :span="24">
        <el-tag class="mc-questionnaire-assist-tag" @click="assistClick(1)">scope.row</el-tag>
        <el-dialog class="mc-questionnaire-assist-dialog"
          title="帮助"
          :visible.sync="assist.apiVisible"
          width="80%">
          内部控件自动绑定变量名scope.row.xxx 即可在提交时自动赋值
        </el-dialog>
      </el-col>
    <slot  name="body" :row="form" :vue="vueIns"></slot>
    <el-col>
        <slot name="bottom" :row="action" :vue="vueIns"></slot>
    </el-col>
  </el-row>
</template>

<script>
import McCommon from "./McCommon";
export default {
  name: 'mc-questionnaire',
  data () {
    return {
        //表单数据
        form:{},
        assist: {show:window.iframeUi,apiVisible:false},
        action:{action:0},
        vueIns : this
    }
  },
  props:{
    //saveUrl 保存问卷地址 getUrl
    'mcConfig':{type:Object,default:null},
    //参数值 这样可以接受变量 表达式之类的，暂时20个足够使用了
    'mcvs1':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvs2':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvs3':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvs4':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvs5':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvs6':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvs7':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvs8':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvs9':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvs0':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    //是否开启查询功能
    'mcEnableQuery':{type:Boolean,default:true},
    'mcvg1':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvg2':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvg3':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvg4':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvg5':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvg6':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvg7':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvg8':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvg9':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcvg10':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcWatch':{type:String,default:null},
    'beforeSubmit':{type:Function,default:null},
    /*当查询表单数据前调用*/
    'beforeQueryForm':{type:Function,default:null},
  },
  watch:{
    action:{
      handler(o,n){
        if(n.action==1){
          o.action=0;
          this.submit();
        }
      },
      deep:true
    }
  },
  computed:{

  },
  created(){
    var _t = this;
    McCommon.register.watch(this,function (){
      _t.refresh();
    })
    /*var _t = this;
    this.$nextTick(function(){//虚拟dom转化为真实dom后触发
      var pageVue = window.MC ? window.MC['vue'] : window.vueMc;
      if(typeof pageVue !='undefined' && pageVue && this.mcWatch){
        var watch = this.mcWatch;
        if(watch){
          var watchVars = watch.trim().split(",");
          for(var n=0;n<watchVars.length;n++){
            var varName = watchVars[n];
            pageVue.$watch(varName,function(n,o){
              _t.refresh();
            },{deep:true});
          }
        }
      }
    })*/
  },
  mounted () {
    this.refresh();
  },
  updated:function(){

  },
  methods:{
    reload(){
      this.refresh();
    },
    getAxiosParam(){
      var result = {};
      var request = this.$magicaltool.request;
      var url = this.mcConfig.getUrl;
      var contentType = this.mcConfig.getContentType;
      if(url) {
        var ncv = request.util.collectMcNameCompareValue(this,"g");
        var param = {};
        var pk = request.util.getUrlParameter("pk");
        if(request.util.isMcQueryUrl(url) || request.util.isContentTypeJson(this.mcConfig.getContentType)){
          param = request.util.paramsTomMcQuery(ncv);
          if(pk){
            param.param.id = pk;
          }
        }else{
          param = request.util.paramsToJson(ncv);
          if(pk){
            param.id = pk;
          }
        }
        result.param = param;
      }
      result.url = url;
      result.method = this.mcConfig.getMethod||'post';
      result.contentType = contentType;
      result.request = request;
      return result;
    },
    refresh(){
      if(!this.mcEnableQuery){
        return;
      }
      var request = this.$magicaltool.request;
      if(this.mcConfig && this.mcConfig.getUrl) {
        var result = this.getAxiosParam();
        if (this.beforeQueryForm) {
          //回调函数 如果返回false则中止查询
          if (!this.beforeQueryForm({vue: this, request: result})) {
            return false;
          }
        }
        var _t  = this;
        request.axios({
          contentType: result.getContentType,
          cache: true,
          $vue: this,
          url: result.url,
          method: result.method,
          param: result.param
        }).then(res => {
          _t.$emit("before-render-data", {res: res});
          if (res.data) {
            if (Array.isArray(res.data)) {
              if (res.data.length > 0) {
                this.form = res.data[0];
              }
            } else {
              this.form = res.data;
            }
          }
        })
      }
        /*var param = {id:pk};
        var ncv = request.util.collectMcNameCompareValue(this,"g");
        this.mergeForm(ncv,param)
        result.param = param;
        if(this.beforeQueryForm){
          //回调函数 如果返回false则中止查询
          if(!this.beforeQueryForm({vue:this,request:result})){
            return false;
          }
        }
        request.axios({contentType:this.mcConfig.getContentType,cache:true,$vue:this,url:url,method:this.mcConfig.getMethod||'get',param:param}).then(res=>{
          _t.$emit("before-render-data",{res:res});
          if(res.data){
              this.form = res.data;
            }
          })
        }*/
    },
    mergeForm:function (ncv,form){
      for(var i=0;i<ncv.length;i++){
          var item = ncv[i];
          form[item.name]  = item.value;
      }
      return form;
    },
    submit(){
      McCommon.util.elFormValidate(this.$refs['mcQuesBody'],this,()=>{
        this._beginSubmit();
      })
    },
    _beginSubmit(){
      var request = this.$magicaltool.request;
      if(this.mcConfig && this.mcConfig.saveUrl){
        var ncv = request.util.collectMcNameCompareValue(this,"s");
        var param = {};
        for(var key in this.form){
          param[key]=this.form[key];
        }
        this.mergeForm(ncv,param);
        if(this.beforeSubmit){
          var callbackValue = this.beforeSubmit({data:param,form:this.form});
          if(typeof callbackValue=='undefined'){
            if(window.iframeUi){
              this.$notify({type:"warning",message:":before-submit（提交前触发事件）需要return true或者 return false;"})
            }
          }
          if(!callbackValue){
            return false;
          }
        }
        request.axios({contentType:this.mcConfig.postContentType,cache:false,$vue:this,url:this.mcConfig.saveUrl,method:this.mcConfig.postMethod||'post',param:param}).then(res=>{
          var pk = request.util.getUrlParameter("pk");
          if(pk!==null){
            this.$message({type:"success",message:"更新成功"})
          }else {
            this.$message({type:"success",message:"提交成功"})
          }
          this.$emit("on-success",res,this.form);
        })
      }else {
        this.$message({type:"warning",message:"请先配置保存地址mcConfig信息"})
      }
    },
    assistClick(){
        McCommon.util.parent.layer({title:"帮助",content:"内部控件自动绑定变量名scope.row.xxx 即可在提交时自动赋值"})
    }
  }
}
</script>

<style lang="scss">
    .mc-questionnaire-assist{
      display:none;
      position:absolute;
      left:0px;
      top:0px;
      width: 100px;
      z-index:1001;
    }
    .mc-questionnaire-assist-tag{
      color:#409EFF;
      height:unset;
      line-height:unset;
    }
    .magicalcoder-dragging .mc-questionnaire-assist{
      display:block;
    }
    .magicalcoder-dragging .mc-questionnaire{
      padding: 10px;
      border: 1px solid #a0a0a0;
    }
    .mc-questionnaire-assist-dialog{
      z-index: 99999 !important;
    }
    .mc-questionnaire>.mc-ui-absolute-pane{
      min-height: 60px;
    }
    .mc-questionnaire>.el-col{
      margin-top:6px;
    }
    .magicalcoder-dragging .mc-questionnaire:before{
      content: '问卷';
      color:#4551ff;
      font-weight:bold;
      font-size: xx-small;
      float: right;
    }
    /*配置设计器界面边框颜色*/
    .magicalcoder-dragging div.mc-questionnaire{
      border-color: #5976cf;
    }
</style>
